import React, { Component } from 'react'
import { Layout, Breadcrumb } from 'antd';
import TheSidebar from '../../components/TheSidebar.jsx'
import HomeRouter from '../../router/HomeRouter';
import './home.css'
import TheBreadcrumb from '../../components/TheBreadcrumb.jsx';
import { getStorage} from '../../utils/stroage.js';
const { Header, Content,Sider } = Layout;

export default class Home extends Component {
    state = {
        collapsed: false,
        userInfo:'666'
    };

    onCollapse = collapsed => {
        // console.log(collapsed);
        this.setState({ collapsed });
    };
    componentDidMount(){
       const userInfo= getStorage('userInfo')
       this.setState({ userInfo });
    }
    render() {
        const { collapsed,userInfo } = this.state;
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Header className="head" style={{ color: '#fff', fontSize: '30px',display:'flex',justifyContent:'space-between' }}>
                    HREADER
                    <span >欢迎你【{userInfo.account}】</span> 
                    </Header>

                <Layout className="site-layout">
                    <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <TheSidebar></TheSidebar>
                    </Sider>
                    <Content style={{ margin: '0 16px' }}>
                        <TheBreadcrumb style={{ margin: '30px 0' }}></TheBreadcrumb>

                        <div className="site-layout-background" style={{ padding: 5, minHeight: 360 }}>
                            <HomeRouter></HomeRouter>
                        </div>
                    </Content>
                  
                </Layout>
            </Layout>
        );
    }
}
